<template>
  <div class="container">
    <div class="home">
      <div class="HotTopic-container">
        <div class="c-title">
         <i class="iconfont icon-Bigscreen-ico-redianfaxian-quanwangredianshijian"></i>
          热点事件
        </div>
        <HotTopic :loop="true"></HotTopic>
      </div>
      <div class="HotTopic-container">
        <div class="c-title">
          <i class="iconfont  icon-diqu"></i>
          活跃地区
        </div>
        <ActiveArea></ActiveArea>
      </div>
      <div class="HotTopic-container">
        <div class="c-title">
          <i class="iconfont  icon-tesezhuanti"></i>
          特色专题
        </div>
        <FeaturedTopic></FeaturedTopic>
        <div style="margin-top: 24px">
          <HotTopic1 :items="carouselItems" :loop="true"></HotTopic1>
        </div>
      </div>

      <div class="HotTopic-container" style="display: flex; justify-content: space-between">
        <div style="width: 660px;">
          <div class="c-title">
            <i class="iconfont icon-rementuijian"></i>
            热门推荐
          </div>
          <PopularRecommendations></PopularRecommendations>
        </div>
        <div style="width: 660px;">
          <div class="c-title">
            <i class="iconfont icon-gexinghuamoba"></i>
            个性化推荐
          </div>
          <PersonalizedRecommendation></PersonalizedRecommendation>
        </div>
      </div>
       <div class="HotTopic-container">
        <div class="c-title">
          <i class=" iconfont icon-tuijian-m"></i>
          焦点资源
        </div>
       <FocusResources style="margin-bottom: 100px;"></FocusResources>
      </div>

      <div>
       <PopularRelated></PopularRelated>
      </div>
      
    </div>
  </div>
</template>

<script>
import HotTopic from "@/components/home/HotTopic.vue";
import HotTopic1 from "@/components/home/HotTopic1.vue";
import ActiveArea from "@/components/home/ActiveArea.vue";
import FeaturedTopic from "@/components/home/FeaturedTopic.vue";
import PopularRecommendations from "@/components/home/PopularRecommendations.vue";
import PersonalizedRecommendation from "@/components/home/PersonalizedRecommendation.vue";
import PopularRelated from "../components/home/PopularRelated.vue";
import FocusResources from "@/components/home/FocusResources.vue";
export default {
  components: {
    HotTopic,
    HotTopic1,
    ActiveArea,
    FeaturedTopic,
    PopularRecommendations,PersonalizedRecommendation,FocusResources,PopularRelated
  },
  data() {
    return {
      carouselItems: [
        { imgUrl: "https://picsum.photos/200/140?random=1", text: "俄乌冲突" },
        { imgUrl: "https://picsum.photos/200/140?random=2", text: "美国金穹" },
        { imgUrl: "https://picsum.photos/200/140?random=3", text: "南海问题" },
        {
          imgUrl: "https://picsum.photos/200/140?random=4",
          text: "朝鲜半岛局势",
        },
        { imgUrl: "https://picsum.photos/200/140?random=5", text: "项目 5" },
        { imgUrl: "https://picsum.photos/200/140?random=6", text: "项目 6" },
        { imgUrl: "https://picsum.photos/200/140?random=7", text: "项目 7" },
        { imgUrl: "https://picsum.photos/200/140?random=8", text: "项目 8" },
        { imgUrl: "https://picsum.photos/200/140?random=9", text: "项目 9" },
        { imgUrl: "https://picsum.photos/200/140?random=10", text: "项目 10" },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
}
.HotTopic-container {
  margin-top: 34px;
}
.c-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 28px;
  color: #333333;
  margin-bottom: 12px;
  i{
  font-size: 28px;
  }
}
</style>